<template>
	<view>
		<scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index==TabCur?'text-orange cur':''" v-for="(item,index) in status" :key="index" @tap="tabSelect" :data-id="index">
					{{item.name}}
				</view>
			</view>
		</scroll-view>
		<view class="notyet" style="text-align: center;" v-if="!orders.length">
			<view class="cu-avatar xl margin-top-lg" style="background-image:url(static/notyet.png);background-color:transparent;"></view>
			<view class="margin-top-sm text-gray">暂无订单</view>
		</view>
		<view class="padding-sm" v-if="orders.length">
					<view class="bg-white padding-sm margin-top-sm" v-for="(item,index) in orders" :key="index" >
						<view class="content-t flex justify-between padding-sm" style="align-items: center;">
							<view class="">
								订单号：{{item.orderCode}}
							</view>
							<view class='cu-tag round bg-orange padding-sm'  style="background-color: #fe5337;">
								<text v-if="item.orderStatus==`SUCCESS`">充值成功</text>
								<text v-else-if="item.orderStatus==`FAILED`">充值失败</text>
								<text v-else>充值中</text>
							</view>
						</view>
						<view class="content-c flex justify-between" style="align-items: center;">
							<view class="c-left flex" style="align-items: center;width: 80%;overflow: hidden;">
								<view class="cu-avatar radius  xl" :style="{ 'backgroundImage':'url('+ item.productImg +')' }"></view>
								<view class="margin-left-sm " style="width:70%;">
									<view class="margin-bottom-sm title text-cut text-bold text-black">
										{{item.productName}}
									</view>
									<view class="margin-bottom-sm text-gray text-sm" >
										{{item.productSku}}
									</view>
									<view class="margin-bottom-sm text-gray text-sm">
										{{item.s}}
									</view>
									<view class="margin-bottom-sm">
										x{{item.productNum}}
									</view>
								</view>
							</view>
							<view class="c-right margin-right-sm text-right">
								<text class="text-price margin-left-sm text-xl">{{item.totalPrice}} 积分</text>
							</view>
						</view>
						<view class="c-bottom flex justify-between padding-sm margin-tb-sm">
							<view class=""></view>
							<button class="cu-btn round line-orange" @tap="OrderInfo(item)" style="color: #fe5337;">查看订单</button>
						</view>
					</view>
				</view>
	</view>
</template>

<script>
	import common from 'common/common.js';
	import request from '../../common/request';
	let current = 1;
	export default {
		data() {
			return {
				TabCur:0,
				status:[
					{
						id:1,
						name:"全部",
						status:"ALL"
					},
					{
						id:2,
						name:"充值中",
						status:"OTHER"
					},
					{
						id:3,
						name:"充值成功",
						status:"SUCCESS"
					},
					{
						id:4,
						name:"充值失败",
						status:"FAILED"
					}
				],
				orders:[],
				state:"ALL",
				count:0,
				modalName:"",
				staff:"",
				isLoign:false
			}
		},
		onLoad(e) {
			this.staff = uni.getStorageSync("staff");
			this.state="ALL";
			if(this.state=="ALL"){
				this.TabCur=0;
				current = 1;
			}else if(this.state=="FAILED"){
				this.TabCur=3;
				current = 1;
			}else if(this.state=="SUCCESS"){
				this.TabCur=2;
				current = 1;
			}else if(this.state=="OTHER"){
				this.TabCur=1;
				current = 1;
			}
			this.getOrderList();
		},
		onShow() {
		},
		async onReachBottom(){
			uni.showLoading({title: '加载中',mask:true});
			this.getOrderList();
			setTimeout(function () {uni.hideLoading();}, 600);
		},
		methods: {

			OrderList(params) {
				var url = common.base_url+'/ems/order/getUserOrder';
				params = {
					staffId: this.staff.id,
					state: this.state,
					}
				
			  this.isLoading = true;
			  // 使用Promise包装异步操作
			  return new Promise((resolve, reject) => {
			    // 使用fetch进行POST请求
			    fetch(url, {
			      method: 'POST',
			      headers: {
			        'Content-Type': 'application/json', // 指定请求体的格式为JSON
			        // 可添加其他需要的请求头
			      },
			      body: JSON.stringify(params), // 将参数对象转换为JSON字符串作为请求体
			    })
			    .then(response => {
			      if (!response.ok) {
			        throw new Error(`HTTP error! Status: ${response.status}`);
			      }
			      return response.json(); // 解析JSON格式的响应数据
			    })
			    .then(data => {
			      resolve(data);
			    })
			    .catch(error => {
			      reject(error);
			    });
			  });
			},
			hideModal(e) {
				this.modalName = null;
			},
			async getOrderList(){
				uni.showLoading({ title: '加载中', mask: true });
				var token = uni.getStorageSync("token");
				if(this.count!=0 && (current>(Math.ceil(this.count / 20)))){return}
				const RBD = await this.OrderList({token:token,state:this.state,current:current,pageSize:20});
				// const RBD = await this.OrderList({token:token,state:this.state});
				const { code, msg,total,rows } = RBD;
				if(code==200){
					this.orders = this.orders.concat(rows);
					this.count =total;
					current++;
				}
				uni.hideLoading();
			},
			// async getOrderList() {
			//   try {
			//     // 显示加载框
			//     uni.showLoading({ title: '加载中', mask: true });
			// 	var token = uni.getStorageSync("token");
			//     // 调用异步方法
			//     const RBD = await this.OrderList({ token: token, state: this.state });
			//     // 处理异步操作的结果 RBD
			// 	const { code, msg,data } = RBD;
			// 	if(code==200){
			// 		this.orders = data;
			// 	}
			//   } catch (error) {
			//     // 处理错误
			//   } finally {
			//     uni.hideLoading();
			//   }
			// },
			
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				this.orders=[];
				this.count=0;
				current=1;
				this.state=this.status[this.TabCur].status;
				this.getOrderList();
			},
			OrderInfo(item){
				uni.navigateTo({
					// url:'orderInfo?id='+item.id
					url: `orderInfo?order=`+ encodeURIComponent(JSON.stringify(item)),
				})
			}
		}
	}
</script>

<style>
.text-orange{
	color: #fe5337;
}
.hide{
	overflow: hidden;
	text-overflow: ellipsis;
}
.titleT{
	overflow: hidden;
	text-overflow: ellipsis;
	width: 75%;
}
.title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}	
.weekSelection{
	  width: 100vw;
	  overflow:hidden;
	  white-space:nowrap;
	  background-color: transparent;
}
.countSum{
	height: 150rpx;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 5px 0px 6px #dddddd inset;
}
</style>
